@layout("/common/default.html",{title:'添加',libs:['form']}){
<div class="layui-body-header">
    <span class="layui-body-header-title">个人信息</span>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 左 -->
        <div class="layui-col-sm12 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 25px;">
                    <div class="text-center layui-text">
                        <div class="user-info-head" id="imgHead">
                            <input type="hidden"  name="photo" id="photo" >
                            <img id="avatarSrc" src="${user.photo}"/>
                        </div>
                        <h2 style="padding-top: 20px;">${user.name!}</h2>
                    </div>
                    <div class="layui-text" style="padding-top: 30px;">
                        <div class="info-list-item">
                            <i class="layui-icon layui-icon-notice"></i>
                            <p>${user.email!}</p>
                        </div>

                        <div class="info-list-item">
                            <i class="layui-icon layui-icon-cellphone"></i>
                            <p>${user.phone!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右 -->
        <div class="layui-col-sm12 layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body layui-text">

                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基本信息</li>
                            <li>修改密码</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-form layui-tab-item layui-show" lay-filter="userInfo">
                                <input type="hidden" id="onlyid" name="id" value="${user.id!}"/>
                                <div class="layui-form user-info-form" style="max-width: 400px;padding-top: 25px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账号:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="loginName"  value="${user.loginName!}" class="layui-input layui-disabled" lay-verify="required" disabled/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">邮件:<span style="color: red;">*</span></label>
                                        <div class="layui-input-block">
                                            <input type="email" name="email"  value="${user.email!}" class="layui-input" lay-verify="required|email" required  disabled/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">姓名:<span style="color: red;">*</span></label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name"  value="${user.name!}" class="layui-input"  lay-verify="required" required  disabled/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">电话:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="phone" value="${user.phone!}" class="layui-input"  />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-filter="userSubmit" lay-submit>
                                                提交
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form layui-tab-item" style="padding: 6px 25px 30px 25px;">
                                <div class="layui-form user-info-form" style="max-width: 400px;padding-top: 25px;" >
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">旧密码:<span style="color: red;">*</span></label>
                                        <div class="layui-input-block">
                                            <input type="password" id="password" name="password" class="layui-input"  lay-verify="password" required/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">新的密码:</label>
                                        <div class="layui-input-block">
                                            <input type="password" name="newPassword"  id="LAY_password" lay-verify="pass" class="layui-input"  />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">确认密码:<span style="color: red;">*</span></label>
                                        <div class="layui-input-block">
                                            <input type="password" name="repassword"  lay-verify="repass" class="layui-input" required/>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-filter="pawssubmit" lay-submit>
                                                修改
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>


<script>
    layui.use([ 'element','form', 'upload', 'miniTab','openLayer','resAjax'], function () {
        var  $ = layui.$,
            element = layui.element,
            form=layui.form,
            miniTab = layui.miniTab,
            openLayer=layui.openLayer,
            resAjax=layui.resAjax,
            upload = layui.upload;

        $("#password").change(function(obj){
            var json={
                password:$("#password").val(),
            }

            var obj=resAjax.render({
                url:"/sys/user/verification", //url
                type:"post",//类型
                data:json,//id
            });

             if(obj.code!="0"){
                layer.msg("原密码错误请重新输入");
                 $("#password").val("");
            }



        });

        //自定义验证
        form.verify({
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            password: function (value) {
            }
            ,pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            //确认密码
            , repass: function (value) {
                if (value !== $('#LAY_password').val()) {
                    return '两次密码输入不一致';
                }
            }
        });
        form.on('submit(userSubmit)', function (data) {
            var field=data.field;

            // 请求后台
            var obj=resAjax.render({
                url:'/sys/user/updateUser', //url
                type:"post",//类型
                data:field
            });
            if(obj.code =="0"){
                layer.msg("修改成功!", {time: 2000, icon: 6});
                openLayer.refresh();
            }else {
                layer.msg("修改失败!", {time: 2000, icon: 5});
            }
            openLayer.popup(obj);

        });
        form.on('submit(pawssubmit)', function (data) {
            var field=data.field;
            // 请求后台
            var obj=resAjax.render({
                url:'/sys/user/updatePassword', //url
                type:"post",//类型
                data:field
            });
            openLayer.popup(obj);
            if (obj.code =="0") {
                layer.msg('密码修改成功', {
                    icon: 6,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    miniTab.deleteCurrentByIframe();
                });
            }
            else if (obj.code =="1") {
                layer.msg(obj.msg, {time: 2000, icon: 5});
            }

        });
        //上传头像
        upload.render({
            elem: '#imgHead'
            , url: '/upload/file'
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#avatarSrc').attr('src', result);
                });
            }
            , done: function (res) {
                $.ajax({
                    type: 'post',
                    url: '/sys/user/updatePhoto',
                    dataType: 'json',
                    data: {
                        photo:""+res.filePath+""
                    },
                    async: false,
                    beforeSend: function (data) {

                    },
                    success: function (data) {
                        result = data;
                    },
                    error: function (data) {
                        result = data;
                    }
                });
                if(result.code=="0"){
                        /*utils.tableSuccessMsg(result.msg);*/

                }else {
                    /*utils.tableSuccessMsg("修改失败");*/
                }

            }
            , error: function () {
                /*utils.tableSuccessMsg("上传头像失败");*/
            }
        });
    });
</script>


@}